<template>
<div class="login">
  <img src="../assets/login-bg.webp" class="login-bg" alt="">
  <div class="login-content">
    <div class="login-block">
      <header class="login-title">会议室管理系统</header>
      <span class="login-tip" v-if="showPasswordForm">您的密码为初始密码，请修改密码</span>
      <transition>
        <el-form v-if="!showPasswordForm" class="login-form" ref="loginForm" :model="form" :rules="rules" hide-required-asterisk>
          <el-form-item prop="userName" label="用户名" @keyup.native.enter="login">
            <el-input v-model="form.userName"  placeholder="输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input v-model="form.password" placeholder="输入密码" show-password @keyup.native.enter="login"></el-input>
          </el-form-item>
          <el-form-item prop="captchaCode" label="验证码">
            <el-input v-model="form.captchaCode" placeholder="输入验证码" @keyup.native.enter="login">
              <el-image
                v-if="captcha"
                slot="suffix"
                style="width: 100px; height: 40px;cursor: pointer"
                :src="'data:image/png;base64,' + captcha.image"
                fit="contain"
                @click="getCaptcha"></el-image>
            </el-input>
          </el-form-item>
          <div class="login-row">
            <el-button class="login-btn" type="primary" @click="login">登录</el-button>
          </div>
          <div style="text-align: right;"><el-link class="login-forget" :underline="false" @click="$alert('请联系管理员')">忘记密码？</el-link></div>
        </el-form>
        <password-form
          v-else
          class="login-page"
          :password="form.password"
          @change-success="doAfterLogin"></password-form>
      </transition>
    </div>
  </div>
</div>
</template>

<script>
const defaultPassword = 'Css@111111';
import passwordForm from '@/views/self/resetPasswordForm'
export default {
  name: "Login",
  components: { passwordForm },
  data(){
    return{
      form:{
        userName: '',
        password: '',
        captchaCode: ''
      },
      rules: {
        userName: [
          {required: true, message: '用户名不能为空', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ],
        captchaCode: [
          {required: true, message: '验证码不能为空', trigger: 'blur'}
        ]
      },
      info: null,
      showPasswordForm: false,
      captcha: null
    }
  },
  created(){
    this.getCaptcha();
  },
  methods:{
    getCaptcha(){
      this.$yAxios({
        url: this.$api.login.getCaptcha,
      }, info => {
        this.$set(this, 'captcha', info);
      });
    },
    login(){
      this.$refs['loginForm'].validate().then(() => {
        this.$yAxios({
          method: 'post',
          url: this.$api.login.login,
          data: Object.assign({serialNum: this.captcha.serialNum}, this.form),
          loading: true
        }, info => {
          this.info = info;
          localStorage.setItem('Authorization', info.Authorization);
          if(defaultPassword === this.form.password){
            this.showPasswordForm = true;
          }else{
            this.doAfterLogin(info);
          }
        }, e => {
          this.getCaptcha();
        });
      });
    },
    doAfterLogin(){
      localStorage.setItem('user', JSON.stringify({
        name: this.info.realName,
        id: this.info.userId,
        tenantId: this.info.tenantId
      }));
      this.$router.replace({
        name: 'Home'
      })
    }
  }
}
</script>
<style scoped lang="less">
.el-form-item__label{
  color:#ddd !important;
}

.login{
  position: relative;
  width: 100%;
  height: 100%;
  color: #666;
  background: #2f3447;
  display: flex;
  align-items: center;
  .login-bg{
    position: absolute;
    left:0;
    top:0;
    width:100%;
  }
  >.login-img{
    background-image: url("../assets/login/login.jpg");
    background-position: center;
    background-size: cover;
    // width: 33.3333333333%;
    height: 100%;
    position: relative;
    >.login-header{
      position: absolute;
      top: 10.2vh;
      left: 4.3vw;
      font-size: 40/9vh;
      letter-spacing: 5/9vh;
      line-height: 60/9vh;
      width: 4.5em;
      color: #fff;
    }
    >.login-footer{
      position: absolute;
      bottom: 3.7vh;
      left: 2.2vw;
      color: #DAE0F2;
      font-size: 16/9vh;
    }
  }
  >.login-content{
    width: 66.6666666667%;
    margin:auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    // background: #ffffff;
    >.login-block{
      display: inline-block;
      min-width: 43%;
      text-align: center;
      position: relative;
      color: #3A3F63;
      background: rgba(0,0,0,0.4);
      padding:20px 40px;
      border-radius: 15px;
      transform: translateY(-10%);
      
      >.login-title{
        height: 80px;
        color:#fff;
        line-height: 80px;
        text-align: center;
        font-size: 32px;
        font-weight: bold;
      }
      >.login-tip{
        font-size: 13px;
        margin-top: -10px;
        display: block;
        opacity: 0.8;
      }
      >.login-form{
        /deep/.el-form-item{
          margin: 10px 0;
          &.is-error{
            .el-input >input{
              border-color: #F56C6C;
            }
          }
        }
        
        .el-link{
          color:#ddd !important;
        }
        >.login-row{
          margin-top: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          >.login-btn{
            width: 100%;
            height: 45px;
            border-radius: 10px;
            padding: 0;
          }
          
          >.login-forget{
          }
        }
      }
    }
  }
}
</style>
